<template>
    <div class="recommend-count-list">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">推荐总数</span>
            </template>
        </van-nav-bar>

        <div class="recomment-title">
            <p>总推荐<span class="getter"></span><span>{{day.all_count}}</span><span class="getter"></span>人</p>
        </div>

        <div class="Promote-list">
            <div :class="['promote-template',chroice=='day'?'font-color':'']" @click="tagData('day')">
                <span>{{day.sort_count}}</span>
                <p>日</p>
            </div>
            <div :class="['promote-template',chroice=='week'?'font-color':'']" @click="tagData('week')">
                <span>{{week.sort_count}}</span>
                <p>周</p>
            </div>
            <div :class="['promote-template',chroice=='mon'?'font-color':'']" @click="tagData('mon')">
                <span>{{mon.sort_count}}</span>
                <p>月</p>
            </div>
        </div>

        <div class="list">

            <div class="user-list-template" v-for="(item,index) in countList" @click="JumpToDe(item)">
                <van-row>
                    <van-col span="4">
                        <a-avatar :src="item.head_pic.indexOf('http:')>-1?`${item.head_pic}`:`http://www.starrymedia.vip${item.head_pic}`" :size="40" />
                    </van-col>
                    <van-col span="20">
                        <van-cell  value="内容" label="描述信息" >
                            <template #title>
                                <span style="font-size:15px;color:#333;">{{item.mobile | changePhone}}</span>
                            </template>
                            <template #label>
                                <span>{{item.agent_time}}</span>
                            </template>
                            <template #default>
                                <span style="color:#333;display: block;margin-top: 15px;">￥ 
                                    <span style="font-size:24px;">{{getInviteMoney()}}</span>
                                </span>
                            </template>
                        </van-cell>
                    </van-col>
                </van-row>
            </div>



            
        </div>
    </div>
</template>
<script>
import {_getInvitePeople} from "../../service/proxy"
export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            headerimg:require('../../assets/img/logo.png'),

            chroice:"day",
            countList:[],
            day:{},
            week:{},
            mon:{},
        }
    },
    async mounted(){
        await this.getData()
        let datetype=JSON.parse(localStorage.getItem("recomcount-detail"))
        
        console.log(datetype)
        try{
            if(datetype.type!=null){
                this.chroice=datetype.type
            }
        }catch(e){

        }
        

        this.tagData(this.chroice)
    },
    filters:{
        formateDate(time){
            return moment(time*1000).format('YYYY-MM-DD HH:mm:ss')
        },
        changePhone(val){
            if(val!=undefined){
                return val.replace(/(^\d{3}|\d{4}\B)/g,"$1 ");
            }
        }
    },
    methods:{
        JumpToDe(info){
            let obj={}
            obj.info=info
            obj.money=this.$data[this.chroice].invite_money
            obj.type=this.chroice
            localStorage.setItem("recomcount-detail",JSON.stringify(obj))
            this.$router.push("/recomdetail")
        },
        getInviteMoney(){
            return this.$data[this.chroice].invite_money
        },
        tagData(key){
            console.log(this.$data[key])
            this.chroice=key
            this.countList=[]
            this.countList=[].concat(...this.$data[key].sort_list)
        },
        onClickLeft(){
            this.$router.push("/procenter")
        },
        async getData(){
            let _this=this
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            let day=_getInvitePeople({user_id:uid,sort:"day"})
            let week=_getInvitePeople({user_id:uid,sort:"week"})
            let month=_getInvitePeople({user_id:uid,sort:"month"})
            await day.then(res=>{
                if(res.errcode==1){
                    _this.day=res.data
                    // _this.countList=[].concat(res.data.sort_list)
                }
            })
            await week.then(res=>{
                if(res.errcode==1){
                    _this.week=res.data
                }
            })
            await month.then(res=>{
                if(res.errcode==1){
                    _this.mon=res.data
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}
.recommend-count-list{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    .hometitle{
        font-size: 18px;
        .font-SC();
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }
    .recomment-title{
        width: 325px;
        height: 66px;
        background-image: url("../../assets/img/proxy-count.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        // margin: 10px auto;
        position: relative;
        top: 20px;
        left: 26px;
        right: 26px;
        z-index: 200;
        color: #fff;
        box-shadow: 0 5px 10px rgba(51, 51, 51, .5);
        p{
            .font-SC();
            text-align: center;
            line-height: 60px;
            font-size: 12px;
            margin-bottom: 0;
            span{
                font-family: "DINPro Medium";
                font-size: 30px;

            }
            .getter{
                display: inline-block;
                width: 10px;
                height: 2px;
            }
        }
    }


    .Promote-list{
        width: 357px;
        height: 80px;
        background-color: #fff;
        position: relative;
        top: 0px;
        left: 9px;
        right: 9px;
        border-radius: 5px;
        box-shadow: 0px 3px 7px rgba(237, 236, 236, .59);
        display: flex;
        justify-content: center;
        align-items: center;
        .promote-template{
            display: inline-block;
            width: 80px;
            height: 66px;
            color: #ccc;
            text-align: center;
            padding-top: 20px;
            padding-bottom: 8px;
            span{
                display: block;
                font-family: "DINPro Medium";
                font-size: 18px;
                line-height: 30px;
            }
            p{
                .font-SC();
                font-size: 9px;
                margin-bottom: 0;
            }

        }
        .font-color{
            color: #333;
        }
    }


    .list{
        width: 100%;
        min-height: 100px;
        padding: 10px 15px;
        .user-list-template{
            width: 100%;
            height: auto;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0px 3px 7px rgba(237, 236, 236, .59);
            /deep/.van-cell{
                padding: 0;
                font-family: 'DINPro Medium';
                font-size: 12px;
                color: #999;
                line-height: 20px;
            }
            /deep/.van-cell:not(:last-child)::after{
                display: none;
            }
            /deep/.van-cell__value{
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    }










}
</style>